<template>
  <layer :layer="layer" @confirm="submit" ref="layerDom" @close="cancel">
    <el-form :inline="true" :model="searchParam">
      <el-form-item label="用户账号">
        <el-input placeholder="请输入用户账号" v-model="searchParam.username" />
      </el-form-item>
      <el-form-item label="手机号码">
        <el-input
          placeholder="请输入手机号码"
          v-model="searchParam.phoneNumber"
        />
      </el-form-item>
      <el-form-item>
        <commonBtn
          :value="'搜索'"
          :type="'primary'"
          :icon="'search'"
          :plain="true"
          @click="getTableData"
        ></commonBtn>
        <commonBtn
          :value="'重置'"
          :icon="'refresh'"
          @click="refreshFn"
        ></commonBtn>
      </el-form-item>
    </el-form>
    <el-table
      :data="searchParam.data"
      v-loading="isLoad"
      ref="multipleTableRef"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" class="center" />
      <el-table-column label="用户账号" prop="username"></el-table-column>
      <el-table-column label="用户昵称" prop="nickName"></el-table-column>
      <el-table-column label="手机号" prop="phoneNumber"></el-table-column>
      <el-table-column label="状态" align="center">
        <template #default="scope">
          <el-tag v-if="scope.row.status == '0'">{{
            scope.row.statusDict
          }}</el-tag>
          <el-tag type="danger" v-if="scope.row.status == '1'">{{
            scope.row.statusDict
          }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="createTime"
        label="创建时间"
        align="center"
        show-overflow-tooltip
      ></el-table-column>
    </el-table>
    <pag
      :showPage="true"
      :pageData="searchParam"
      @getTableData="getTableData"
    />
  </layer>
</template>
<script>
import commonBtn from "_c/commonBtn/index.vue";
import { defineComponent, reactive, ref } from "vue";
import layer from "_c/layer/index.vue";
import pag from "_c/pag/index.vue";
import { queryAddUserPage } from "@/api/user.js";
import { saveUserRole } from "@/api/role.js";
import { ElMessage } from "element-plus";
export default defineComponent({
  components: {
    layer,
    commonBtn,
    pag,
  },
  props: {
    //用于控制对话框
    layer: {
      required: true,
      type: Object,
    },
    //角色id
    roleId: {
      required: true,
      type: String,
    },
  },
  setup(props, ctx) {
    //表格引用
    const multipleTableRef = ref(null);
    //表格懒加载
    const isLoad = ref(true);
    //定义搜索条件
    const searchParam = reactive({
      roleId: "",
      username: "",
      phoneNumber: "",
      current: 1,
      size: 10,
      total: 0,
      data: [],
    });
    //定义userIds
    const userIds = ref([]);
    //查询列表数据
    const getTableData = async () => {
      let params = {
        roleId: props.roleId,
        username: searchParam.username || undefined,
        phoneNumber: searchParam.phoneNumber || undefined,
        pageNum: searchParam.current,
        pageSize: searchParam.size,
      };
      const { data, success } = await queryAddUserPage(params);
      if (success) {
        searchParam.data = data.records;
        searchParam.total = parseInt(data.total);
        isLoad.value = false;
      }
    };
    getTableData();
    //表单重置
    const refreshFn = () => {
      searchParam.username = "";
      searchParam.phoneNumber = "";
      getTableData();
    };
    //多选
    const handleSelectionChange = (arr) => {
      if (arr) {
        for (let i = 0; i < arr.length; i++) {
          userIds.value.push(arr[i]["userId"]);
        }
      }
    };
    //新增授权用户
    const addUserRole = async () => {
      if (userIds.value.length === 0) {
        return;
      }
      let data = {
        roleId: props.roleId,
        userIds: userIds.value,
      };
      const { success } = await saveUserRole(data);
      if (success) {
        userIds.value = [];
        props.layer.show = false;
        ElMessage.success("操作成功！");
      }
    };
    //提交
    const submit = () => {
      addUserRole();
    };
    //取消
    const cancel = () => {
      userIds.value = [];
    };
    return {
      multipleTableRef,
      isLoad,
      searchParam,
      submit,
      cancel,
      getTableData,
      refreshFn,
      handleSelectionChange,
    };
  },
});
</script>
<style lang="scss" scoped></style>
